import React from "react";
import classnames from 'classnames'
import styles from './index.module.less'

export default ({ menu, handleMenuClick, collapsed }) => {
  return (
    <div className={classnames({ [styles["righter-bar"]]: true, [styles["collapsed"]]: collapsed })}>
      <h2 style={{ display: collapsed ? 'none' : 'block', marginTop: 16, marginLeft: 16 }}>{menu.title}</h2>
      <ul className={styles["righter-bar-content"]}>
        {menu?.children?.map(({ id, title, path }) => (
          <li className={styles["item"]} key={id}>
            <ul>
              <li className={styles["item-child"]} onClick={() => handleMenuClick(menu.id, id)}>
                <p title={title} className={classnames({ [styles['item-three-child']]: true, [styles['ellipsis']]: true, [styles['active']]: id == menu.active })}>
                  {title}
                </p>
              </li>
            </ul>
          </li>
        ))}
      </ul>
    </div>
  );
};
